{% block content %}
{% if(videoPosterLinks|length) %}
<main class="bs-docs-masthead" id="content" role="main">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators slide-pagination">
            {% if(videoPosterLinks|length) %}
                {% set _count = 0 %}
                {%  for videoPoster in videoPosterLinks %}
                    {% if(videoPoster.getObjectType() == 'video') %}
                    <li data-target="#carousel-example-generic" data-slide-to="{{ _count }}" class="{{ _count == 0 ? 'active' : '' }}">
                        {{ image(constant.pathUploadImageThubnail ~ '130_130/' ~ videoPoster.video.getMainImages().images.getImagePath() , 'width' : '60' , 'height' : '60') }}
                    </li>
                    {% elseif(videoPoster.getObjectType() == 'video_group') %}
                    <li data-target="#carousel-example-generic" data-slide-to="{{ _count }}" class="{{ _count == 0 ? 'active' : '' }}">
                        {{ image(constant.pathUploadImageThubnail ~ '130_130/' ~ videoPoster.videoGroup.imageLink.getFirst().images.getImagePath() , 'width' : '60' , 'height' : '60') }}
                    </li>
                    {% endif %}
                    {% set _count = _count + 1 %}
                {%  endfor %}
            {% endif %}
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            {% if(videoPosterLinks|length) %}
                {% set _count = 1 %}
                {%  for videoPoster in videoPosterLinks %}
                    {% if(videoPoster.getObjectType() == 'video') %}
                    <div class="item {{ _count == 1 ? 'active' : '' }}">
                        <a href="{{url(videoPoster.video.getLinkTo())}}">
                            {{ image(constant.pathUploadImage ~ videoPoster.video.getPosterImages().images.getImagePath()) }}
                        </a>
                        <div class="carousel-caption">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-6">
                                    </div>
                                    <div class="col-md-6">
                                        <div class="title">{{ videoPoster.video.videoDescription.getName() }}</div>
                                        <div class="short-desc text14">
                                            <div class="dotdotdot" style="height: auto; width: auto;max-height:23px;">
                                                {{ videoPoster.video.videoDescription.getDescription() }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% elseif(videoPoster.getObjectType() == 'video_group') %}
                    <div class="item {{ _count == 1 ? 'active' : '' }}">
                        <a href="{{url(videoPoster.videoGroup.getLinkTo())}}">
                            {{ image(constant.pathUploadImage ~ videoPoster.videoGroup.getPosterImages().images.getImagePath()) }}
                        </a>
                        <div class="carousel-caption">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-6">
                                    </div>
                                    <div class="col-md-6">
                                        <div class="title">{{ videoPoster.videoGroup.videoDescription.getName() }}</div>
                                        <div class="short-desc text14">
                                            <div class="dotdotdot" style="height: auto; width: auto;max-height:23px;">
                                                {{ videoPoster.videoGroup.videoDescription.getDescription() }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}
                    {% set _count = _count + 1 %}
                {%  endfor %}
            {% endif %}
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right icon-next"></span>
        </a>
    </div>
</main>
{% endif %}
{% endblock %}